﻿@using NuGetGallery.Helpers
@model SupportRequestsViewModel

@{
    ViewBag.Title = "Support Requests";
}

@section TopStyles{
    @Styles.Render("~/Content/themes/custom/page-support-requests.min.css")
}

@ViewHelpers.AjaxAntiForgeryToken(Html)

<section role="main" class="container main-container">
    <div id="sr-nav-menu">
        <a id="manageAdminsButton" href="@Url.Action("Admins")" title="Manage Support Request Administrators">Manage SR-Admins</a>
    </div>

    @if (Model == null || !Model.Issues.Any())
    {
        <p>No issues to display.</p>
        <p>@Html.ActionLink("Refresh", "Index")</p>
    }
    else
    {
        <div data-bind="with: historyViewModel" style="display: none;" id="history-dialog">
            <table id="history-table" class="table">
                <thead>
                    <tr>
                        <th>When (UTC)</th>
                        <th>Who</th>
                        <th>What</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: historyEntries()">
                    <tr>
                        <td>
                            <span data-bind="datetime: EntryDate"></span>
                        </td>
                        <td>
                            <span data-bind="text: EditedBy"></span>
                        </td>
                        <td>
                            <span data-bind="text: Comments"></span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        
        <div data-bind="with: editViewModel" style="display: none;" id="editSupportRequest-dialog">
            <form id="editSupportRequest-form">
                <fieldset class="form">
                    <legend>Edit</legend>

                    <div class="form-field">
                        <label for="editAssignedTo">Assigned to</label>
                        <select id="editAssignedTo"
                                class="select-brand"
                                name="editAssignedTo"
                                data-bind="options: assignedToChoices,
                                    value: editAssignedToId,
                                    optionsText: 'Text',
                                    optionsValue: 'Value'"></select>
                    </div>

                    <div class="form-field">
                        <label for="editIssueStatus">Issue status</label>
                        <select id="editIssueStatus"
                                class="select-brand"
                                name="editIssueStatus"
                                data-bind="options: issueStatusChoices,
                                    value: editIssueStatusId,
                                    optionsText: 'Text',
                                    optionsValue: 'Value'"></select>
                    </div>

                    <div class="form-field">
                        <label for="editIssueComment">Add comment</label>
                        <textarea id="editIssueComment" name="editIssueComment" data-bind="value: editIssueComment" rows="10"
                                  autocomplete="off" autofocus></textarea>
                    </div>
                </fieldset>
            </form>
        </div>

        <div id="filter-container">
            <form>
                <fieldset id="filter-supportrequests-form" class="form">
                    <legend>Filter</legend>

                    <div class="form-field">

                        <select id="assignedToFilter"
                                class="select-brand"
                                name="assignedToFilter"
                                data-bind="options: assignedToChoices,
                                    value: assignedToFilter,
                                    optionsText: 'Text',
                                    optionsValue: 'Value',
                                    optionsCaption: '[Assigned To]'"></select>

                        <select id="issueStatusIdFilter"
                                class="select-brand"
                                name="issueStatusIdFilter"
                                data-bind="options: issueStatusChoices,
                                    value: issueStatusIdFilter,
                                    optionsText: 'Text',
                                    optionsValue: 'Value',
                                    optionsCaption: '[Issue Status]'"></select>


                        <select id="reasonFilter"
                                name="reasonFilter"
                                class="select-brand"
                                data-bind="options: reasonChoices,
                                    value: reasonFilter,
                                    optionsText: 'Text',
                                    optionsValue: 'Text',
                                    optionsCaption: '[Reason]'"></select>

                        <br />

                        <input type="submit" class="btn-brand" value="Filter" data-bind="click: applyFilter" />
                    </div>
                </fieldset>
            </form>
        </div>

        <div style="display: none;" data-bind="visible: filteredIssues().length > 0, foreach: filteredIssues()">
            <div class="supportrequest" data-bind="id: 'sr-' + Key">
                <div class="side">
                    <p class="sr-issue-id" data-bind="text: '#SR-' + Key"></p>
                    <p data-bind="text: '&diams; ' + IssueStatusName, attr: { style: $parent.getStyleForIssueStatus($data) }"></p>
                </div>
                <div class="sr-issue">
                    <div class="pull-right">
                        <a class="historyButton" data-bind="click: $parent.showHistory" title="Click to view history for this issue.">History</a>
                        <a class="editButton" href="#" data-bind="click: $parent.editSupportRequest" title="Click to edit this issue.">Edit</a>
                        <a class="contactButton" href="#" data-bind="attr: { href: $parent.generateContactUserUrl($data) }" title="Click to contact the issue reporter.">Email</a>
                    </div>
                    <p class="bold" data-bind="text: IssueTitle, click: $parent.editSupportRequest"></p>
                    <p>
                        Created by <a data-bind="visible: CreatedBy !== 'Anonymous',text: CreatedBy, attr: { href: $parent.generateUserProfileUrl($data) }"></a>
                        <span data-bind="visible: CreatedBy === 'Anonymous'">unauthenticated user</span>
                        on <span data-bind="text: CreatedDate"></span>.<br />
                        <span data-bind="visible: AssignedTo !== null">
                            Assigned to <span class="bold" data-bind="text: AssignedToGalleryUsername ? AssignedToGalleryUsername : ''"></span>.
                        </span>
                        <span data-bind="visible: AssignedTo === null" style="color: #ff0000">Not assigned!</span>
                        <span data-bind="visible: IsRelatedToPackage"><br />For package <a data-bind="text: PackageId + ' v' + PackageVersion, attr: { href: $parent.generatePackageDetailsUrl($data) }"></a></span>
                    </p>
                    <p>
                        <span class="italic" data-bind="html: Details"></span>
                    </p>
                    <p class="sr-issue-reason">
                        <span class="ui-icon ui-icon-tag"></span>
                        <span data-bind="text: Reason"></span>
                    </p>
                </div>
            </div>
        </div>

        <div style="display:none;" data-bind="visible: filteredIssues().length == 0">
            <p>No support requests found.</p>
        </div>

        <div data-bind="visible: filteredIssues().length > 0">
            <ul class="pager">
                <li class="previous" data-bind="visible: hasPreviousPage()">
                    <a href="#" data-bind="click: goToPreviousPage" title="Go to the previous page.">Previous</a>
                </li>
                <li class="next" data-bind="visible: hasNextPage()">
                    <a href="#" data-bind="click: goToNextPage" title="Go to the next page.">Next</a>
                </li>
            </ul>
        </div>
    }
</section>

@section BottomScripts {
    @if (Model != null)
    {
        @Scripts.Render("~/Scripts/page-support-requests.min.js")

        <script type="text/javascript">
            $(function () {
                var viewModel = new SupportRequestsViewModel('@Url.Action("Save")', '@Url.Action("Filter")', '@Url.Action("History")');

                viewModel.take(@Model.ItemsPerPage);
                viewModel.pageNumber(@Model.CurrentPageNumber);
                viewModel.maxPageNumber(@Model.MaxPage);
                viewModel.filteredIssues(@Html.ToJson(Model.Issues));
                viewModel.assignedToChoices(@Html.ToJson(Model.AssignedToChoices));
                viewModel.issueStatusChoices(@Html.ToJson(Model.IssueStatusNameChoices));
                viewModel.reasonChoices(@Html.ToJson(Model.ReasonChoices));

                @if (Model.AssignedToFilter.HasValue)
                {
                @:viewModel.assignedToFilter(@Model.AssignedToFilter);
                }

                @if (Model.IssueStatusIdFilter.HasValue)
                {
                @:viewModel.issueStatusIdFilter(@Model.IssueStatusIdFilter);
                }

                @if (Model.ReasonFilter != null)
                {
                @:viewModel.reasonFilter(@Model.ReasonFilter);
                }
                
                ko.applyBindings(viewModel);

                viewModel.styleButtons();
            });
        </script>
    }
}